<template>
	<view class="mychat">
		<view class="list">
			<view class="header">
				<view class="logo">
					微信
				</view>
				<view class="operate">
					<view class="search">
						<uni-icons type="search" size="25" @tap="dump"></uni-icons>
					</view>
					<view class="buttons">
						<uni-icons type="plus" size="20" />
					</view>
				</view>
			</view>

			<view v-for="item in cronylist" :key="item._id" class="cronys" @tap="you(item._id)">
				<view class="cleft">
					<image :src="item.avatar" mode="" class="avatar"></image>
					<text>{{item.name}}</text>
				</view>
				<view class="cright" @tap="clears">
					退出
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref,
	} from 'vue'
	import request from '../../utils/request.js'
	const cronylist = ref([])
	async function getWebsocket() {
		const ids = uni.getStorageSync('idss')
		const data = await request('/rxh/cronylist', {
			id: ids
		})
		cronylist.value = data.data.cronylists
		// uni.request({
		// 	url: '/rxh/cronylist?id=' + ids,
		// 	method: 'GET',
		// 	data: {},
		// 	success: res => {
		// 		// console.log(res.data,8888888)
		// 		cronylist.value = res.data.cronylists
		// 	},
	}


	onMounted(() => {
		getWebsocket()
	})

	const dump = () => {
		uni.navigateTo({
			url: '/pages/mine/search/search'
		});
	}

	const clears = () => {
		uni.removeStorage({
			key: 'idss'
		})
		uni.removeStorage({
			key: 'avatar'
		})
		uni.navigateTo({
			url: '/pages/mine/mine'
		});
	}
	const you = (id) => {
		// console.log(id,22222222222)
		// 设置本地存储
		uni.setStorage({
			key: 'toId',
			data: id
		})
		// 拼接跳转路径
		const url = '/pages/mine/chat/chat?id=' + id
		uni.navigateTo({
			url: url
		})
	}
</script>

<style>
	.header {
		width: 100vw;
		height: 80rpx;
		line-height: 80rpx;
		background-color: antiquewhite;
		position: sticky;
		top: 0;
		text-align: center;
		display: flex;
		justify-content: flex-end;
	}

	.operate {
		display: flex;
		margin-left: 230rpx;
	}

	.cronys {
		width: 100vw;
		height: 10vh;
		line-height: 10vh;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}


	/* 左侧内容 */
	.cleft {
		display: flex;
		align-items: center;
	}

	.avatar {
		width: 70rpx;
		height: 70rpx;
		margin-right: 10px;
		border-radius: 50%;
		overflow: hidden;
	}
</style>